<template>
  <div class="zeroprogress">
    <div class="bar">
      <div class="line" ref="line" :class="{line_progress_on }">
        <div
          class="line_inner"
          ref="line_inner"
          :style="{'width':`${precentcur*100}%`}"
          :class="{line_inner_progress_on }"
        >
          <span
            class="ball"
            draggable="true"
            ref="ball"
            :class="{ball_progress_on }"
            @touchstart.prevent="progressTouchStart"
            @touchmove.prevent="progressTouchMove"
            @touchend="progressTouchEnd"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { log } from "util";
export default {
  name: "zeroprogress",
  data() {
    return {
      precentcur: null,
      light_on: false,
      flag: false
    };
  },
  // 控制样式变化
  computed: {
    line_progress_on() {
      return this.light_on;
    },
    line_inner_progress_on() {
      return this.light_on;
    },
    ball_progress_on() {
      return this.light_on;
    }
  },
  props: {
    percent: {
      default: 0
    }
  },
  methods: {
    progressTouchStart(e) {
      this.light_on = true;
      this.flag = true;
    },
    progressTouchMove(e) {
      //手指的偏移
      if (this.flag) {
        let fingerX = e.changedTouches[0].clientX;
        let total = this.$refs.line.clientWidth;
        let offsetX = this.$refs.line.offsetLeft;
        let pro = (fingerX - offsetX) / total;
        //触摸超出控制
        if (pro > 0.99) {
          pro = 0.99;
        }
        if (pro < 0) {
          pro = 0;
        }
        this.precentcur = pro;
      }
    },
    progressTouchEnd(e) {
      this.$emit("progressChange", this.precentcur);
      this.flag = false;
      this.light_on = false;
    }
  },

  watch: {
    percent(newval) {
      if (!this.flag) {
        this.precentcur = newval;
      }
    }
  }
};
</script>


<style lang='scss'>
$zerocolor: #d43c33;
.bar {
  .line {
    width: 75vw;
    background-color: #fff;
    height: 2px;
    margin-top: 9px;
    position: relative;
    border-radius: 10px;
    opacity: 0.7;
    .line_inner {
      height: 2px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: $zerocolor;
      opacity: 0.9;
      .ball {
        display: inline-block;
        width: 14px;
        height: 14px;
        background-color: #ffffff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        right: -5px;
        z-index:6;
        transform: translateY(-50%);
        transition: transform 0.3s;
      }
    }
  }
  .line_progress_on {
    height: 4px;
    margin-top: 8px;
    border-radius: 10px;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 6px;
    }
    .line_inner_progress_on {
      position: relative;
      width: 0;
      height: 4px;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 6;
      }
      .ball_progress_on {
        transform-origin: center;
        transform: translateY(-50%) scale(1.5);
      }
    }
  }
}
</style>